<template>
    <view class="xilu ">
        <view class="page-foot" @click="formSubmit()">
            <view class="btn1">确定</view>
        </view>
        <view class="container p30">
            <view class="flex-box pt20">
                <view class="fs30 col5">收货人姓名</view>
                <input class="flex-grow-1 tr" v-model="address.name" placeholder="请输入" placeholder-class="cola"></input>
            </view>
            <view class="flex-box pt70">
                <view class="fs30 col5">手机号码</view>
                <input class="flex-grow-1 tr" v-model="address.mobile" placeholder="请输入" placeholder-class="cola"></input>
            </view>
            <multi-select :items="areas" @change="bindRegionChange" id_key="id" name_key="name" children_key="childlist" :value="address.region_id" ref="pickers">
                <view class="flex-box pt70">
                    <view class="fs30 col5">省市区</view>
                    <view class="flex-grow-1 tr m-arrow-right cola">{{selectedDistrict?selectedProvince.name +"-"+ selectedCity.name +'-'+ selectedDistrict.name:"请选择"}}</view>
                </view>
            </multi-select>
            <view class="fs30 col5 pt50">详细地址</view>
            <textarea id="" cols="30" v-model="address.address" rows="10" class="xilu_textarea" placeholder="请输入"></textarea>
            <view class="flex-box flex-between pt70" @click="bindDefalt()">
                <view class="fs30 col5">设为默认</view>
                <image v-if="address.default_status==1" src="/static/icon/default-on.png" class="xilu_default"></image>
                <image v-else src="/static/icon/default.png" class="xilu_default"></image>
            </view>
        </view>
    </view>
</template>

<script>
    import multiSelect from '@/components/multi-select/multi-select.vue';
    var validate = require("../../xilu/validate.js");
    export default {
        components: {
            multiSelect
        },
        data() {
            return {
				areas:[],
				selectedProvince: null,
				selectedCity: null,
				selectedDistrict: null,
				address:{
					name:'',
					mobile:'',
					address:'',
					default_status:0
				}
            };
        },
		onLoad() {
			let page = this;
			this.getOpenerEventChannel().on('addressTransfor',function(address){
				let title = '新建地址';
				if(Object.keys(address).length>0){
					page.address = address;
					title = "修改地址";
					//page.$forceUpdate();
				}
				uni.setNavigationBarTitle({
					title: title
				})
			});
			this.$util.getAreaTree().then(areas=>{
				//console.log(areas);
				this.areas = areas;
			})
		},
        methods: {
            bindRegionChange(e) {
                let areaIndex = e.indexValues;
                let areas = this.areas;
                this.address.province_id = areas[areaIndex[0]].id;
                this.address.city_id = areas[areaIndex[0]].childlist[areaIndex[1]].id;
                this.address.region_id = areas[areaIndex[0]].childlist[areaIndex[1]].childlist[areaIndex[2]].id;
                this.selectedProvince = {
                	id: areas[areaIndex[0]].id,
                	'name': areas[areaIndex[0]].name
                };
                this.selectedCity = {
                	id: areas[areaIndex[0]].childlist[areaIndex[1]].id,
                	'name': areas[areaIndex[0]].childlist[areaIndex[1]].name
                };
                this.selectedDistrict = {
                	id: areas[areaIndex[0]].childlist[areaIndex[1]].childlist[areaIndex[2]].id,
                	'name': areas[areaIndex[0]].childlist[areaIndex[1]].childlist[areaIndex[2]].name
                };
            },
			bindDefalt(){
				this.address.default_status = this.address.default_status==1?0:1;
			},
			//提交
			formSubmit() {
			    let formData = this.address;
			    var rule = [
					{name: 'name',nameChn: '收货人',rules: ['require'],errorMsg: {require: '请填写收货人'}},
					{name: 'mobile',nameChn: '手机号',rules: ['require','length:11'],errorMsg: {require: '请填写手机号',length: "手机好格式错误"}},
					{name: 'region_id',nameChn: '省市区',rules: ['require'],errorMsg: {require: '请选择省市区'},},
					{name: 'address',nameChn: '详细地址',rules: ['require'],errorMsg: {require: '请填写详细地址'},}
					];
			    // 是否全部通过，返回Boolean
				//console.log(validate.check(formData,rule),validate.getError(),formData);
			
				if(!validate.check(formData,rule)){
					uni.showToast({
						title: validate.getError()[0],
						icon:'none'
					});
					return ;
				}
				this.$core.post({url:'xilumarket.user_address/set_address',data:formData,success:ret=>{
					this.getOpenerEventChannel().emit("addressSuccess",{})
					uni.navigateBack({});
					uni.showToast({
						title: '保存成功',
						icon:'none'
					});
				}})
			}
			
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_textarea {
            width: 690rpx;
            height: 200rpx;
            background: #F7F9FC;
            border-radius: 20rpx;
            margin: 30rpx 0;
            padding: 23rpx 30rpx;
        }

        &_default {
            width: 70rpx;
            height: 40rpx;
        }
    }
</style>